import styled from 'styled-components'

export const GoodsListWrapper=styled.div`
    /* border: 0.01rem solid black; */
    margin: .08rem .08rem;
    &:after{
        content: '';
        display: block;
        clear: both;
    }
    

`
export const GoodsListItem=styled.li`
    height: 2.7rem;
    float: left;
    &:nth-child(2n){
        float: right;
    }
    width: 1.7rem;
    background-color: white;
    margin: .04rem .04rem;
    position: relative;
    border-radius: .1rem;
    .goods-img{
        img{
            margin: auto;
            width: 1.5rem;
            height:1.5rem
        }
    }
    .goods-title{
        margin: 0 0.08rem;
        text-align: left;
        a{
            font-size: 0.16rem;
        } 
    }
    .goods-coupon{
        margin: 0 .08rem;
        color: red;
        display: flex;
        div{
            display: flex;
            border-radius: .04rem;
            border: .01rem solid pink;
            li{
                font-size: .1rem;
                padding: .01rem .02rem;
                &:nth-child(2){
                    width: .60rem;
                    border-left: .01rem dashed pink;
                    text-overflow:ellipsis; 
                    overflow:hidden; 
                    white-space:nowrap;
                }
            }
            &:first-child{
                margin-right: .04rem;
            }
            &:last-child{
                background-color: #FFF0F5;
            }
        }
    }
    .goods-refprice{
        margin: 0 .08rem;
        text-align: left;
        font-size: .08rem;
        color: gray;
    }
    .goods-subprice{
        margin: 0 .08rem;
        width: 1.7rem;
        height: .38rem;
        position: absolute;
        display: flex;
        font-size: .14rem;
        ul{
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            text-align: left;
            li{
                flex: 1;
                /* width: 0.5rem; */
            }
            &:nth-child(1){
                color: red;
            }
            &:nth-child(2){
                color: orange;
            }
        }
        bottom: 0;
    }
    .goods-price{
        margin: 0 .08rem;
        /* height:0.38em; */
        position: absolute;
        text-align: left;
        font-size: .18rem;
        color: red;
        bottom: 0;
    }
`